<template>
  <div>
    <h2>您好，欢迎超级管理员admin123登录本系统</h2>

    <el-card class="home-content">
      <div slot="header">
        <span>平台基本信息</span>
      </div>

      <div class="info-content">
        <div class="info-content-item">
          <span class="item-icon el-icon-user-solid"></span>

          <div class="item-info-detail">
            <span>用户数量</span>
            <b>{{formData.userTotal}}</b>
          </div>
        </div>
        <div class="info-content-item">
          <span class="item-icon el-icon-star-on"></span>

          <div class="item-info-detail">
            <span>商品数量</span>
            <b>{{formData.goodsTotal}}</b>
          </div>
        </div>
        <div class="info-content-item">
          <span class="item-icon el-icon-shopping-cart-full"></span>

          <div class="item-info-detail">
            <span>货品数量</span>
            <b>{{formData.productTotal}}</b>
          </div>
        </div>
        <div class="info-content-item">
          <span class="item-icon el-icon-phone"></span>

          <div class="item-info-detail">
            <span>订单数量</span>
            <b>{{formData.orderTotal}}</b>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
  
<script>
import axios from 'axios'
export default {
  name: 'home',
  componentTitle: '首页',
  data () {
    return {
      formData: {}
    }
  },
  mounted () {
    axios({
      url: 'http://192.168.200.251:8888/admin/dashboard',
      method: 'get',
      headers: {
          'Shopping-Admin-Token': sessionStorage.getItem('Shopping-Admin-Token')
        }
    }).then(res => {
      this.formData = res.data.data
    })
  }
}
</script>

<style lang="scss" scoped>
h2 {
  padding-left: 30px;
}

.home-content {
  margin: 30px;
}

.info-content {
  display: flex;

  .info-content-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    flex: 1;
    height: 108px;
    box-shadow: 0px 0px 15px #ddd;

    .item-icon {
      font-size: 50px;
    }

    .el-icon-user-solid {
        color: #40c9c6;
    }
    .el-icon-star-on {
        color: #36a3f7;
    }
    .el-icon-shopping-cart-full {
        color: #f4516c;
    }
    .el-icon-phone {
        color: #34bfa3;
    }

    &:hover {
      .item-icon {
        background: #40c9c6;
        color: #fff;
      }
    }

    .item-info-detail {
      display: flex;
      flex-direction: column;
      color: rgba(0,0,0,.45);
      font-size: 16px;

      :first-child {
        margin-bottom: 15px;
      }
    }
  }

  .info-content-item + .info-content-item {
    margin-left: 40px;
  }
}
</style>
